<template>
    <div class="content settle-sub-box">
        <div class="form">
            <el-form :label-width="'120px'"
                     :label-position="'left'"
                     :rules="rules"
                     class="clearfix"
                     ref="formData"
                     :model="formData">
                <el-form-item label="网点名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请填写网点名称" class="full"></el-input>
                </el-form-item>
                <el-form-item label="网点地址" prop="area">
                    <!--                    <el-input v-model="formData.area"></el-input>-->
                    <el-select v-model="formData.area" placeholder="请选择所在区县" class="select full">
                        <el-option
                            v-for="item in areaList"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" prop="address">
                    <el-input v-model="formData.address" placeholder="请填写网点详细地址" class="full"></el-input>
                </el-form-item>
                <el-form-item label="增减货" prop="stock">
                    <!--                    <el-input v-model="formData.stock" size="small"></el-input>-->
                    <el-input-number v-model="formData.stock" class="full" :precision="0"
                                     :controls="false"></el-input-number>
                    <div class="tips" v-if="id">今日已增减货&nbsp;&nbsp;<span style="font-size:14px; color:#000000">{{formData.nowAdd}}</span>，次日开放时段范围外生效</div>
                </el-form-item>
                <el-form-item label="目前剩余">
                    <span>{{formData.kzCount}}</span>
                </el-form-item>
                <el-form-item label="联系人" prop="user">
                    <el-input v-model="formData.user" placeholder="请填写联系人" class="full"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="phone">
                    <el-input v-model="formData.phone" placeholder="请填写联系方式" class="full"></el-input>
                </el-form-item>
                <el-form-item label="可取货时间" prop="week" class="is-required">
                    <input type="hidden" v-model="formData.week" ref="weekInput">
                    <el-checkbox-group v-model="weekList" @change="changeWeek()">
                        <el-checkbox :label="list.value" v-for="(list,index) in weeks" :key="index">{{list.name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="">
                    <div class="time-picker">
                        上午
                        <el-time-picker
                            size="small"
                            class="short"
                            :editable="false"
                            v-model="amStartTime"
                            :value-format="'HH:mm'"
                            :prefix-icon="' '"
                            :format="'HH:mm'"
                            :picker-options="{
                                selectableRange: `00:00:00 -${amEndTime ? amEndTime+':00' : '12:00:00'}`,
                            }"
                            placeholder="开始时间">
                        </el-time-picker>
                        <span class="ml10 mr10">-</span>
                        <el-time-picker
                            size="small"
                            class="short"
                            :editable="false"
                            v-model="amEndTime"
                            :value-format="'HH:mm'"
                            :picker-options="{
                                selectableRange: `${amStartTime ? amStartTime+':00' : '00:00:00'}-12:00:00`,
                            }"
                            :prefix-icon="' '"
                            :format="'HH:mm'"
                            placeholder="结束时间">
                        </el-time-picker>
                    </div>
                    <div class="time-picker ml20">
                        下午
                        <el-time-picker
                            size="small"
                            class="short"
                            :editable="false"
                            v-model="pmStartTime"
                            :value-format="'HH:mm'"
                            :picker-options="{
                                selectableRange: `12:00:00 -${pmEndTime ? pmEndTime+':00' : '23:59:59'}`,
                            }"
                            :prefix-icon="' '"
                            :format="'HH:mm'"
                            placeholder="开始时间">
                        </el-time-picker>
                        <span class="ml10 mr10">-</span>
                        <el-time-picker
                            size="small"
                            class="short"
                            :editable="false"
                            :prefix-icon="' '"
                            v-model="pmEndTime"
                            :value-format="'HH:mm'"
                            :picker-options="{
                                selectableRange: `${pmStartTime ? pmStartTime+':00' : '12:00:00'}-23:59:59`,
                            }"
                            :format="'HH:mm'"
                            placeholder="结束时间">
                        </el-time-picker>
                    </div>
                </el-form-item>
            </el-form>
            <div class="btn">
                <el-button type="primary" @click="save(id)">保存</el-button>
                <el-button @click="goBack">返回</el-button>
            </div>
        </div>
        <!--            </el-container>-->
        <!--        </el-main>-->
    </div>
</template>

<script>
    export default {
        data() {
            let _this = this, phone = /^1\d{10}$/, num = /^-?[0-9]\d*$/,
                checkPhone = (rule, value, callback) => {
                    if (phone.test(value)) {
                        callback()
                    } else {
                        return callback(new Error('请输入正确的手机号'))
                    }
                },
                checkWeek = (rule, value, callback) => {
                    if (_this.formData.week && _this.formData.week.length > 0) {
                        callback()
                    } else {
                        return callback(new Error('请选择可取货时间'))
                    }
                },

                checkNum = (rule, value, callback) => {
                    if (num.test(value)) {
                        callback()
                    } else {
                        return callback(new Error('请填写整数!'))
                    }
                }
            return {
                id: null,
                loading: false,
                fileList: [],
                formData: {
                    name: '',
                    phone: '',
                    area: '',
                    address: '',
                    stock: 0, // 增减货
                    kzCount: '', // 剩余
                    user: '',
                    week: '',
                    amStartTime: '',
                    amEndTime: '',
                    pmStartTime: '',
                    pmEndTime: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入网点名称', trigger: 'blur'}
                    ],
                    user: [
                        {required: true, message: '请输入联系人', trigger: 'blur'}
                    ],
                    area: [
                        {required: true, message: '请选择所在地区', trigger: 'change'}
                    ],
                    address: [
                        {required: true, message: '请输入详细地址', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入手机号码', trigger: 'blur'},
                        {validator: checkPhone, trigger: 'blur'}
                    ],
                    stock: [
                        // {required: true, message: '请输入增减货', trigger: 'blur'},
                        {validator: checkNum, trigger: 'blur'}
                    ],
                    week: [
                        {validator: checkWeek, trigger: 'blur'}
                    ]
                },
                weeks: [
                    {
                        name: '周一',
                        checked: false,
                        value: '周一'
                    },
                    {
                        name: '周二',
                        checked: false,
                        value: '周二'
                    },
                    {
                        name: '周三',
                        checked: false,
                        value: '周三'
                    },
                    {
                        name: '周四',
                        checked: false,
                        value: '周四'
                    },
                    {
                        name: '周五',
                        checked: false,
                        value: '周五'
                    },
                    {
                        name: '周六',
                        checked: false,
                        value: '周六'
                    },
                    {
                        name: '周日',
                        checked: false,
                        value: '周日'
                    }
                ],
                weekList: [],
                areaList: [],
                amStartTime: '',
                amEndTime: '',
                pmStartTime: '',
                pmEndTime: ''
            }
        },
        mounted() {
            if (this.$route.query.id) this.id = this.$route.query.id
            if (this.id) {
                this.getData()
            } else {
                this.initWeek()
                this.amStartTime = '09:00'
                this.amEndTime = '12:00'
                this.pmStartTime = '13:00'
                this.pmEndTime = '18:00'
            }
            this.getArea()
        },
        methods: {
            getArea() {
                this.$http.get('/storeManage/getAllArea').then(result => {
                    if (result.success) {
                        this.areaList = result.data
                    }
                })
            },
            getData() {
                this.$http.get('/storeManage/getStoreManageOne', {
                    id: this.id
                }).then(result => {
                    if (result.success) {
                        this.formData = {
                            name: result.data.name,
                            phone: result.data.contactsPhone,
                            area: result.data.areaCode,
                            address: result.data.address,
                            user: result.data.contacts,
                            stock: 0,
                            kzCount: result.data.kzCount,
                            nowAdd: result.data.replenishNextday
                        }
                        if (result.data.week) {
                            // this.weekList = result.data.week.split('，')
                            // this.formData.week = result.data.week.split('，')
                            this.initWeek(result.data.week.split('，'))
                        }
                        if (result.data.appointTime) {
                            let time = result.data.appointTime.split(',')
                            this.amStartTime = time[0] || '09:00'
                            this.amEndTime = time[1] || '12:00'
                            this.pmStartTime = time[2] || '13:00'
                            this.pmEndTime = time[3] || '18:00'
                        }
                    }
                    this.$refs.formData.resetFields()
                })
            },
            initWeek(list) {
                if (list && list.length > 0) {
                    this.weekList = list
                } else {
                    this.weekList = ['周一', '周二', '周三', '周四', '周五']
                }
                this.changeWeek()
            },
            goBack() {
                this.$emit('upload')
                history.back()
            },
            save(id) {
                this.$refs.formData.validate((valid) => {
                    if (valid) {
                        let obj = {
                            id: this.id,
                            name: this.formData.name,
                            contactsPhone: this.formData.phone,
                            contacts: this.formData.user,
                            address: this.formData.address,
                            areaCode: this.formData.area,
                            week: this.formData.week.join('，'),
                            replenishNextday: this.formData.stock
                        }, url = '/storeManage/updateStorManage'
                        if (!this.id) url = '/storeManage/saveStorManage'
                        obj.appointTime = [this.amStartTime || '00:00', this.amEndTime || '12:00', this.pmStartTime || '12:00', this.pmEndTime || '23:59'].join(',')
                        obj.weekTime = ('上午' + (this.amStartTime ? this.amStartTime : '00:00') +
                            '~' + (this.amEndTime || '12:00') + ' ') + ('下午' + (this.pmStartTime ? this.pmStartTime : '12:00') +
                            '~' + (this.pmEndTime || '23:59'))
                        this.$http.post(url, obj).then(result => {
                            if (result.success) {
                                this.$message({
                                    type: 'success',
                                    message: this.id ? '修改网点信息成功!' : '新增网点信息成功!'
                                })
                                this.goBack()
                            }
                        })
                    } else {
                        return false
                    }

                })
            },
            changeWeek() {
                if (this.weekList.length > 0) {
                    this.formData.week = Object.assign([], this.weekList)
                } else {
                    this.formData.week = ''
                }
                this.$refs.formData.validateField('week')
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .content {
        background-color: #fff;
    }

    .btn {
        padding-left: 120px;

        .el-button {
            width: 120px;
            height: 40px;
        }
    }

    .tips {
        margin-top: 10px;
        font-size: 13px;
        color: #999;
    }

    .form {
        width: 630px;
        margin: 50px auto;
    }

    .el-form {

        /deep/ .el-form-item {
            /*float: left;*/
            /*margin-right: 100px;*/

            /*&:nth-child(2n) {*/
            /*    margin-right: 0;*/
            /*}*/

            .el-input,
            .el-cascader,
            .el-select {
                /*width: 300px;*/
            }

            .el-checkbox-group {
                .el-checkbox {
                    margin-right: 20px;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }

            .el-date-editor {
                .el-input__inner {
                    padding-left: 10px;
                    padding-right: 10px;
                }

                &.short {
                    width: 85px;
                }
            }

            .time-picker {
                float: left;
            }

            .el-input-number {

                input {
                    text-align: left;
                    padding: 0 15px;
                }

                &.no-ml {
                    margin-left: 0;
                }
            }

            .el-textarea {
                width: 820px
            }

            .el-input__inner {
                /*border: none;*/
                /*border-bottom: .02rem solid rgb(226, 225, 225);*/
            }

            .el-form-item__label {
                padding-right: 20px;
            }

        }

        .full {
            margin-right: 0;
            width: 490px;
        }
    }
</style>
